<template>
	<div class="box">
        <m-header v-for="(item, index) in pageTree[type.header]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.header}" ></m-header>
		<CommodityDetailinfo :goodsdata='goodsdata' v-for="(item, index) in pageTree[type.header]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.header}"></CommodityDetailinfo>
		<CommodityDetaildetail :imgUrl='goodsdata.urllist[2].imgurl' v-for="(item, index) in pageTree[type.header]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.header}"></CommodityDetaildetail>
	</div>
</template>

<script>
import Header from "./CommodityDetailHeader";
import CommodityDetailinfo from './CommodityDetailinfo'
import CommodityDetaildetail from './CommodityDetaildetail'
import { mapGetters } from "vuex";
import { getPageTree, initDomTree } from "../../utils/getPageTree";
import axios from 'axios'
export default {
  	// name: 'CommodityDetail',
  	data () {
    	return {
			page: "CommodityDetail",
			goodsdata:{},
			msg: '',
            page: "CommodityDetail",
            type: {
                header: "header",
				CommodityDetailinfo: "CommodityDetailinfo",
				CommodityDetaildetail:'CommodityDetaildetail'
            }
		}
	},
	computed: {
		...mapGetters([
            "getDomTree"
        ]),
        pageTree() {
            return getPageTree(this, this.page);
        }
	},
	components: {
        "m-header": Header,
		"CommodityDetailinfo":CommodityDetailinfo,
		"CommodityDetaildetail":CommodityDetaildetail

	},
	created () {
		var that=this
		//请求对应商品数据
        axios.get('http://goods.scn.weilian.cn/goodsRestApi/queryGoodsList?enterpriseid=55&goodscode=1700102', {
        params: {
        }
  })
    .then(function (response) {
		that.goodsdata=response.data.data[0]
        console.log('请求回来的商品数据是',response.data.data[0]);
    })
    .catch(function (response) {
        console.log(response);
    });
	},
	mounted () {
	},
	updated() {
       
    },
    watch: {
        getDomTree() {
            console.log("页面更新完毕");
            initDomTree(this.getDomTree[this.page]);
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.box {
		/* display: flex; */
	}
</style>
